<script lang="ts" setup>
  import { ref, onMounted } from 'vue';
  import { useRouter } from 'vue-router';

  import { useState } from '@/hooks';
  import { CommonHeader } from '@/components/Header';

  const router = useRouter();
  
  const [duration, setDuration] = useState(5);
  const timer = ref<NodeJS.Timeout | null>(null);

  const goBack = () => {
    router.replace('/');
  };

  onMounted(() => {
    timer.value = setInterval(() => {
      if (duration.value <= 1) {
        clearInterval(timer.value!);
        timer.value = null;

        goBack();
      } else {
        setDuration(d => d - 1);
      }
    }, 1000);
  });
</script>

<template>
  <div class="container">
    <common-header :is-show-back="false" />

    <!-- 移动端 404 内容 -->
    <div class="mobile">
      <div class="title">404</div>
      <div class="desc">页面不存在</div>
      <div class="countdown">页面将在 <span>{{ duration }}</span> 秒后跳转回首页</div>
    </div>
  </div>
</template>

<style scoped lang="scss">
  .container {
    .mobile {
      padding: .06rem;
      text-align: center;
      .title {
        font-size: .16rem;
        font-weight: bold;
        margin-bottom: .16rem;
      }
      .desc {
        font-size: .12px;
        margin-bottom: .16rem;
      }
      .countdown {
        font-size: .15rem;
      }
    }
  }
</style>
